<template>
  <view class="pay-result">
    <view class="pay-status">
      <u-icon name="checkmark-circle-fill" size="60rpx" color="#47D368" />
      <text>支付成功</text>
    </view>
    <view class="pay-money">
      微信支付：
      <price v-if="totalPaid" :price="totalPaid" wr-class="pay-money__price" decimalSmaller fill />
    </view>
    <view class="btn-wrapper">
      <view class="status-btn" @click="onTapReturn('orderList')">查看订单</view>
      <view class="status-btn" @click="onTapReturn('home')">返回首页</view>
    </view>
  </view>
</template>
<script>
import price from '@/components/price';
export default {
  components:{
    price
  },
  data() {
    return {
      totalPaid: 0,
      orderNo: '',
      groupId: '',
      groupon: null,
      spu: null,
      adUrl: '',
    }
  },
  onLoad(options) {
    const { totalPaid = 0, orderNo = '', groupId = '' } = options;
    this.totalPaid = totalPaid
    this.orderNo = orderNo
    this.groupId = groupId
  },
  methods: {
    onTapReturn(target) {
      const { orderNo } = this;
      if (target === 'home') {
        uni.reLaunch({
          url: '/pages/premiumBag/home/index',
        })
      } else if (target === 'orderList') {
        this.$goPath(2, `/pages/premiumBag/mine/orderList?orderNo=${orderNo}`)
      } else if (target === 'order') {
        this.$goPath(2, `/pages/premiumBag/mine/orderDetail?orderNo=${orderNo}`)
      }
    },
  },
}
</script>
<style scoped>
.pay-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.pay-result .pay-status {
  margin-top: 100rpx;
  font-size: 48rpx;
  line-height: 72rpx;
  font-weight: bold;
  color: #333333;
  display: flex;
  align-items: center;
}

.pay-result .pay-status text {
  padding-left: 12rpx;
}

.pay-result .pay-money {
  color: #666666;
  font-size: 28rpx;
  line-height: 48rpx;
  margin-top: 28rpx;
  display: flex;
  align-items: baseline;
}

.pay-result .pay-money .pay-money__price {
  font-size: 36rpx;
  line-height: 48rpx;
  color: #fa4126;
}

.pay-result .btn-wrapper {
  margin-top: 48rpx;
  padding: 12rpx 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}

.pay-result .btn-wrapper .status-btn {
  height: 88rpx;
  width: 334rpx;
  border-radius: 44rpx;
  border: 2rpx solid #fa4126;
  color: #fa4126;
  font-size: 28rpx;
  font-weight: bold;
  line-height: 88rpx;
  text-align: center;
}
</style>